<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1> Vue3 生命周期</h1>
       <h1> {{ mess }}</h1>
    </div>
</body>
<script>
var vm = new Vue({
    el: "#app",
    data: {
       mess:'chatGPT' 
    },
    beforeCreate(){
        console.log('---创建前---');
        console.log(this.mess);
        console.log(this.$el);
    },
    created(){
          console.log('---创建完成---');
          console.log(this.mess);
          console.log( this.$el );
    },
    beforeMount(){
          console.log('---挂载前---');
          console.log(this.mess);
          console.log(this.$el);
    },
    mounted(){
        console.log('---挂载完成---');
        console.log(this.mess);
        console.log(this.$el);
    },
    beforeUpdate(){
        console.log('---更新前---');
        console.log(this.mess);
        console.log(this.$el);
    },
    updated(){
        console.log('---更新后---');
        console.log(this.mess);
        console.log(this.$el);
    },
    beforeDestroy(){
          console.log('---销毁前---');
    },
    destroyed(){
        console.log('---销毁完成---');  
    }
});

</script>
</html>